<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="origin-when-cross-origin">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的公车预约</title>
    <link href="../../css/common.css" rel="stylesheet">
    <link href="../../css/list.css" rel="stylesheet">
    <link href="../../plugin/layui-v2.9.0/css/layui.css" rel="stylesheet">
</head>

<body>
    <div class="list-content">
        <div class="top-header">
            <div class="content">
                <span class="server-name">
                    我的公车预约
                </span>
                <div class="to-right">
                    <button id="to_back" type="button"
                        class="layui-btn layui-btn-primary layui-border-purple layui-btn-sm">返回</button>
                </div>
            </div>
        </div>
        <div class="search-box">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">乘车地点</label>
                        <div class="layui-input-inline">
                            <input type="text" id="sp_csb_place_start"  autocomplete="off" lay-affix="clear" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">目的地</label>
                        <div class="layui-input-inline">
                            <input type="text" id="sp_csb_place_end"  autocomplete="off" lay-affix="clear" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">预约车型</label>
                        <div class="layui-input-inline">
                            <select id="sp_csb_car_type">
                                <option value="" selected>全部</option>
                                <option value="小车">小车</option>
                                <option value="中巴车">中巴车</option> 
                                <option value="大巴车">大巴车</option>
                            </select>
                        </div>
                    </div>
                    <button id="searchData" type="button" class="layui-btn" > <i class="layui-icon layui-icon-search"></i> 查询 </button>
                </div>
            </form>
        </div>
        <div class="list-box">
            <table id="list" lay-filter="test"></table>
            <div id="page_box"></div>
        </div>
        <script src="../../plugin/layui-v2.9.0/layui.js"></script>
        <script src="../../plugin/jquery-2.0.0.min.js"></script>
        <script src="../../api.js"></script>
        <script src="../../js/config.js"></script>
        <script src="../../mock/data.js"></script>

        <script>
            $(function(){
                API.addClickTimes("公车预约记录");
            })
            var laytable, laydate, laypage, layer, element;
            layui.use(function () {
                laytable = layui.table;
                layer = layui.layer;
                element = layui.element;
                laydate = layui.laydate;
                laypage = layui.laypage;
                LIST.initPage();
            });

            var LIST = {
                tableObject: null,
                curr: 1,
                limit: 20,
                COL: [[
                    {
                        field: 'LAY_INDEX', align: 'center', fixed: 'left', title: '序号', width: 50,
                        templet: function (d) {
                            return LIST.limit * (LIST.curr - 1) + d.LAY_INDEX +1;
                        }
                    },
                    { field: 'sp_csb_use_unit', minWidth: 150, expandedWidth: 150, title: '用车单位' },
                    { field: 'sp_csb_time_use', width: 180, title: '用车时间',align:"center" },
                    { field: 'sp_csb_place_start', minWidth: 100, title: '乘车地点' },
                    { field: 'sp_csb_place_end', minWidth: 100, title: '目的地' }, 
                    { field: 'sp_csb_way_line', minWidth: 180, title: '运行路线要求'},
                    { field: 'sp_csb_ride_body_size', width: 100, title: '乘车人数',align:"center"},
                    { field: 'sp_csb_car_type', width: 120, title: '预约车型' },
                    { field: 'sp_csb_use_body_name', width: 120, title: '用车人' },
                    { field: 'sp_csb_use_body_phone', width: 120, title: '用车人手机' },
                ]],
                initPage: function () {
                    $("#to_back").click(function () {
                        window.location.href="../../index.html";
                    });
                    $("#searchData").click(function(){
                        LIST.getPageData();
                    });
                    // 创建渲染实例
                    laytable.render({
                        elem: '#list',
                        cols: LIST.COL,
                        height: 'full-185',
                        data: [],
                        cellMinWidth: 80,
                        totalRow: false,
                        limit: LIST.limit,
                        even: true,
                        page: false
                    });
                    laypage.render({
                        elem: 'page_box',
                        count: 0,
                        layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
                    });
                    this.getPageData();
                },
                getPageData: function () {
                    API.getGcyyList({
                        pagenumber: LIST.curr,
                        pagesize: LIST.limit,
                        sp_csb_place_start:$("#sp_csb_place_start").val(),
                        sp_csb_place_end:$("#sp_csb_place_end").val(),
                        sp_csb_car_type:$("#sp_csb_car_type").val(),
                    },
                        function (data) {
                            if (data.code != "0") {
                                layer.msg('获取公车预约列表失败！');
                                return
                            }
                           LIST.reloadData(data);
                        }
                    );
                },
                reloadData:function(data){
                    laytable.reload("list", {
                        data: data.data,
                        limit: LIST.limit
                    })
                    laypage.render({
                        elem: 'page_box',
                        curr: LIST.curr,
                        count: data.allsize,
                        limit: LIST.limit,
                        layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
                        limits: [10,20, 30, 50],
                        jump: function (obj, first) {
                            if (LIST.curr != obj.curr || LIST.limit != obj.limit) {
                                LIST.curr = obj.curr;
                                LIST.limit = obj.limit;
                                LIST.getPageData();
                            }
                        }
                    });
                }
            };
        </script>
</body>

</html>